<template>
  <div class="min-h-screen bg-[#f5f7fa]">
    <!-- 顶部导航栏 -->
    <header class="border-b border-[#dcdfe6] bg-white shadow-sm">
      <div
        class="mx-auto flex max-w-7xl items-center justify-between px-4 py-3"
      >
        <!-- Logo和网站名称 -->
        <div class="flex items-center space-x-2">
          <img src="@/assets//imges/logo.png" alt="Logo" class="h-10 w-10" />
          <span class="text-xl font-medium text-[#303133]">育考星</span>
        </div>

        <!-- 导航菜单 -->
        <nav class="flex flex-1 justify-center space-x-8">
          <router-link
            v-for="(item, index) in navItems"
            :key="index"
            :to="item.path"
            custom
            v-slot="{ isActive, navigate }"
          >
            <a
              href="#"
              @click="navigate"
              :class="[
                'border-b-2 px-1 py-4',
                isActive
                  ? 'border-[#409EFF] text-[#409EFF]'
                  : 'border-transparent text-[#606266] hover:border-[#409EFF] hover:text-[#409EFF]',
              ]"
            >
              {{ item.name }}
            </a>
          </router-link>
        </nav>

        <!-- 右侧用户信息 -->
        <div class="flex items-center space-x-4">
          <!-- 消息通知 -->
          <button class="relative p-2 text-[#606266] hover:text-[#409EFF]">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-6 w-6"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
              />
            </svg>
            <span class="absolute top-0 right-0 flex h-2 w-2">
              <span
                class="absolute inline-flex h-full w-full animate-ping rounded-full bg-[#409EFF] opacity-75"
              ></span>
              <span
                class="relative inline-flex h-2 w-2 rounded-full bg-[#409EFF]"
              ></span>
            </span>
          </button>

          <!-- 用户头像和下拉菜单 -->
          <div class="relative">
            <div
              class="flex items-center space-x-2 cursor-pointer"
              @click="toggleDropdown"
            >
              <img
                class="h-8 w-8 rounded-full"
                :src="userStore.userInfo?.avatar"
                alt="用户头像"
              />
              <span class="text-sm text-[#606266]">{{ userStore.userInfo?.name }}</span>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="h-4 w-4 text-[#909399] transition-transform duration-200"
                :class="{ 'rotate-180': isDropdownOpen }"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M19 9l-7 7-7-7"
                />
              </svg>
            </div>

            <!-- 下拉菜单 -->
            <div
              v-show="isDropdownOpen"
              class="absolute right-0 mt-2 w-36 rounded-lg bg-white py-2 shadow-lg ring-1 ring-black ring-opacity-5"
              @click="isDropdownOpen = false"
            >
              <a
                href="#"
                class="block px-4 py-2 text-sm text-[#606266] hover:bg-[#f5f7fa] hover:text-[#409EFF]"
                @click="goToProfile"
              >
                个人中心
              </a>
              <a
                href="#"
                class="block px-4 py-2 text-sm text-[#606266] hover:bg-[#f5f7fa] hover:text-[#409EFF]"
                @click="handleLogout"
              >
                退出
              </a>
            </div>
          </div>
        </div>
      </div>
    </header>
    <!-- 路由出口 -->
    <div class="mx-auto w-4/5">
      <router-view v-slot="{ Component }">
        <transition name="fade" mode="out-in">
          <component :is="Component" />
        </transition>
      </router-view>
    </div>
   
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/store/modules/user'

const router = useRouter()
const userStore = useUserStore()
const isDropdownOpen = ref(false)

// 用户信息状态管理
userStore.userInfo


const navItems = [
  { name: '考试中心', path: '/student/exam' },
  { name: '练习中心', path: '/student/practice' },
  { name: '我的错题本', path: '/student/mistakes' },
  { name: '考试记录', path: '/student/records' },
  { name: '公告', path: '/student/notice' },
]

// 切换下拉菜单
const toggleDropdown = () => {
  isDropdownOpen.value = !isDropdownOpen.value
}

// 跳转到个人中心
const goToProfile = () => {
  router.push('/student/userInfo')
}

// 处理退出登录
const handleLogout = async () => {
  await userStore.logOut()
  // TODO: 实现退出登录逻辑，比如清除token等
  router.push('/login')
}

// 点击外部关闭下拉菜单
const closeDropdown = (e) => {
  if (!e.target.closest('.relative')) {
    isDropdownOpen.value = false
  }
}

// 添加全局点击事件监听
onMounted(() => {
  document.addEventListener('click', closeDropdown)
})

// 组件卸载时移除事件监听
onUnmounted(() => {
  document.removeEventListener('click', closeDropdown)
})
</script>

<style lang="less" scoped>
/* Element Plus 的主要颜色变量
--el-color-primary: #409EFF;
--el-color-success: #67C23A;
--el-color-warning: #E6A23C;
--el-color-danger: #F56C6C;
--el-color-info: #909399;

--el-text-color-primary: #303133;
--el-text-color-regular: #606266;
--el-text-color-secondary: #909399;

--el-border-color-base: #DCDFE6;
--el-border-color-light: #E4E7ED;
--el-bg-color: #F5F7FA;
*/

/* 添加过渡动画 */
.rotate-180 {
  transform: rotate(180deg);
}

/* 页面切换动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
